<template>
	<div>
		<el-dialog title="图片裁剪" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" v-model="isShowDialog">
			<div class="cropper-warp">
				<div class="cropper-warp-left">
					<img ref="cropperImgRef" :src="cropperImg" :id="cropperId" class="cropper-warp-left-img" />
				</div>
				<div class="cropper-warp-right">
					<div class="cropper-warp-right-title">裁剪预览</div>
					<div class="cropper-warp-right-item">
						<div class="cropper-warp-right-value">
							<el-image class="cropper-warp-right-value-img"
								:src="cropperImgBase64" 
								:preview-src-list="[cropperImgBase64]">
							</el-image>
						</div>
						<div class="cropper-warp-right-label">{{width}} x {{height}}</div>
					</div>
					<div class="cropper-warp-right-item">
						<div class="cropper-warp-right-value">
							<el-image class="cropper-warp-right-value-img cropper-size"
								:src="cropperImgBase64" 
								:preview-src-list="[cropperImgBase64]">
							</el-image>
						</div>
						<div class="cropper-warp-right-label">{{parseInt(width / 2)}} x {{parseInt(height / 2)}}</div>
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, nextTick, onUnmounted } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import { stat } from 'fs';
export default {
	name: 'crm/component/cropper',
	props: {
		// 绑定值
		model: {
			type: Object,
			default: () => {},
		},
	},
	setup(props, context) {
		const cropperImgRef = ref();
		const state = reactive({
			isShowDialog: false,
			cropper: undefined,
			file: undefined,
			width: 100,
			height: 100,
			hasModified: false,
			cropperId: 1,
			cropperImg: '',
			cropperImgBase64: '',
		});
		// 打开弹窗
		const openDialog = (file) => {
			state.file = file;
			state.cropperId = new Date().getTime();
			state.cropperImg = file.url;
			state.isShowDialog = true;
			nextTick(() => {
				initCropper();
			});
		};
		// 关闭弹窗
		const closeDialog = () => {
			if(state.cropper){
				state.cropper.destroy();
			}
			state.file = undefined;
			state.cropperId = 1;
			state.cropperImg = '';
			state.cropperImgBase64 = '';
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			context.emit('cancel', state.file);
			closeDialog();
		};
		// 确定
		const onSubmit = () => {
			context.emit('submit', state.file, state.hasModified, state.cropperImgBase64);
			closeDialog();
		};
		// 初始化cropperjs图片裁剪
		const initCropper = () => {
			if(state.cropperId == 1){
				return;
			}
			const options = Object.assign({
				viewMode: 1,
				dragMode: 'none',
				initialAspectRatio: 0,
				aspectRatio: 0,
				preview: '.before',
				background: false,
				autoCropArea: 1,
				zoomOnWheel: false,
				crop: () => {
					if(state.cropper){
						state.width = state.cropper.getCroppedCanvas().width;
						state.height = state.cropper.getCroppedCanvas().height;
						state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/png');
					}
				},
				cropend: () => {
					state.hasModified = true;
				}
			}, props.model);

			state.cropper = new Cropper(cropperImgRef.value, options);
		};
		
		onUnmounted(() => {
			if(state.cropper){
				state.cropper.destroy();
			}
		});

		return {
			cropperImgRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			initCropper,
			...toRefs(state),
		};
	},
};
</script>

<style scoped lang="scss">
.cropper-warp {
	display: flex;
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		flex: 1;
		border: var(--el-border-base);
		background: var(--color-whites);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		height: 520px;
		width: 45%;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					max-width: 320px;
					max-height: 320px;
					margin: 0 auto;
				}
				.cropper-size {
					max-width: 160px;
					max-height: 160px;
					margin: 0 auto;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
